Comments (31)
qdouble
commented on July 20, 2024
1
@Meligy I just removed comment from json and updated readme.
npm run build will create a JIT version of your project. npm run compile will create an AOT version of your project. AOT is smaller on a small app, but can be bigger on a big app, depends on your templates and lazy loading. AOT apps should always be faster than JIT apps, they compile about twice as fast in the browser.
from angular-webpack-starter.
qdouble
commented on July 20, 2024
It may be a Windows issue I remember reading that there were some issues with using AOT and Windows... I'll look into it. You may want to compile AOT with VM in the meantime.
from angular-webpack-starter.
IAMtheIAM
commented on July 20, 2024
I had to wrap the compile: commands in quotes with backslash to escape, then it runs. Windows requires double quotes to run a command in a subdirectory such as the ngc
"compile:aot": "npm run sass && npm run clean:compile && \"./node_modules/.bin/ngc\" -p src && npm run build:aot",
"compile:only": "npm run clean:compile && npm run sass && \"./node_modules/.bin/ngc\" -p src",
"compile:prod": "npm run sass && npm run clean:compile && \"./node_modules/.bin/ngc\" -p src && npm run build:prod",
Now compile:aot, compile:only and compile:prod runs fine. Good job, app runs fine with AOT now.
But watch:aot still has error:
throw new Error("must provide pattern")
^
Error: must provide pattern
at new Glob (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\glob\glob.js:119:11)
at glob (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\glob\glob.js:57:11)
at Function.globSync [as sync] (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\glob\glob.js:76:10)
at C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\globule\lib\globule.js:77:17
at C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\globule\lib\globule.js:32:30
at Array.reduce (native)
at processPatterns (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\globule\lib\globule.js:24:30)
at Object.globule.find (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\globule\lib\globule.js:76:17)
at Gaze.add (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\gaze\lib\gaze.js:164:19)
at new Gaze (C:\Source\POC\Microservice.Poc\angular2webpack2-starter\node_modules\watch-run\node_modules\gaze\lib\gaze.js:68:10)`
from angular-webpack-starter.
qdouble
commented on July 20, 2024
@IAMtheIAM cool, I just updated the compile commands in the repo, I'll look into updating the watch command later, but if you find the solution beforehand, just let me know.
from angular-webpack-starter.
qdouble
commented on July 20, 2024
@IAMtheIAM I removed the watch:aot for now as watching the typescript files and compiling ngc at the same time is a bit tricky and slow, I'll add it back later if I come up with a good way to handle it.
from angular-webpack-starter.
Meligy
commented on July 20, 2024
This is still failing for me
(running from master, pulled just now)
OS: Mac OS 10.11.6
Node: 6.3.1
NPM: 3.10.3
The output I get is:
> npm run build:aot
> [email protected] build:aot /Users/Meligy/Code/github/qdouble/angular2webpack2-starter
> webpack
PRODUCTION BUILD = true
Hash: 041f2d80480bc64e6574
Version: webpack 2.1.0-beta.21
Time: 5765ms
[0] ./src async 160 bytes {0} [built]
+ 354 hidden modules
ERROR in ./src/main.browser.aot.ts
Module not found: Error: Can't resolve './compiled/app/app.module.ngfactory' in '/Users/Meligy/Code/github/qdouble/angular2webpack2-starter/src'
@ ./src/main.browser.aot.ts 6:29-75
ERROR in [default] /Users/Meligy/Code/github/qdouble/angular2webpack2-starter/src/main.browser.aot.ts:6:35
Cannot find module './compiled/app/app.module.ngfactory'.
Child html-webpack-plugin for "index.html":
+ 4 hidden modules
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/Cellar/node/6.3.1/bin/node" "/usr/local/bin/npm" "run" "build:aot"
npm ERR! node v6.3.1
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:aot: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build:aot script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2webpack2-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2webpack2-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2webpack2-starter
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/Meligy/Code/github/qdouble/angular2webpack2-starter/npm-debug.log
from angular-webpack-starter.
qdouble
commented on July 20, 2024
@Meligy You should just use npm run compile, don't use npm run build:aot directly unless you've already compiled it.
from angular-webpack-starter.
Meligy
commented on July 20, 2024
@qdouble that works very well.
By the way, thanks for the super awesome free repo.
Would it make sense to set npm run compile as a prebuild:aot npm script?
from angular-webpack-starter.
Meligy
commented on July 20, 2024
Oops. I take my last comment about npm scripts back, now that I look at the actual npm scripts. Sorry for that.
from angular-webpack-starter.
qdouble
commented on July 20, 2024
@Meligy Glad you like it. I just added a comment above the build:aot script. It serves a different purpose than compile and you don't always want to use both, that's why there are different options.
from angular-webpack-starter.
Meligy
commented on July 20, 2024
@qdouble maybe the readme will be better. Comments are not supported in package.json. NPM cannot parse it.
So, for smallest possible bundle you just run npm run build? Or you run npm run compile first? Or is compile all enough? Thanks again.
from angular-webpack-starter.
DzmitryShylovich
commented on July 20, 2024
$ npm run compile
> [email protected] compile D:\Workspace\angular2webpack2-starter
> npm run compile:aot
> [email protected] compile:aot D:\Workspace\angular2webpack2-start er
> npm run sass && npm run clean:compile && "./node_modules/.bin/ngc" -p src && n pm run build:aot
> [email protected] sass D:\Workspace\angular2webpack2-starter
> node-sass src -o src
Rendering Complete, saving .css file...
Wrote CSS to D:\Workspace\angular2webpack2-starter\src\app\app.css
Wrote 1 CSS files to D:\Workspace\angular2webpack2-starter\src
> [email protected] clean:compile D:\Workspace\angular2webpack2-sta rter
> npm run rimraf -- "src/compiled"
> [email protected] rimraf D:\Workspace\angular2webpack2-starter
> rimraf "src/compiled"
> [email protected] build:aot D:\Workspace\angular2webpack2-starter
> webpack Hash: 475ab1547ad3040e1f2d Version: webpack 2.1.0-beta.22 Time: 11243ms s
[0] ./src async 160 bytes {1} [built]
+ 522 hidden modules
ERROR in ./src/app/app.routes.ts
Module not found: Error: Can't resolve '..compiledapp
eatureslazyindex.ngfactory' in 'D:\Workspace\angular2webpack2-starter\src\app'
@ ./src/app/app.routes.ts 7:55-117
@ ./src/app/app.module.ts
@ ./src/compiled/app/app.module.ngfactory.ts
@ ./src/main.browser.aot.ts
Child html-webpack-plugin for "index.html":
+ 4 hidden modules
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:aot"
npm ERR! node v6.3.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build:aot: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build:aot script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2webpack2-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2webpack2-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2webpack2-starter
npm ERR! There is likely additional logging output above.
any ideas?
from angular-webpack-starter.
qdouble
commented on July 20, 2024
@DzmitryShylovich this comes up right after running the npm run compile command only?
from angular-webpack-starter.
qdouble
commented on July 20, 2024
@DzmitryShylovich I suppose the angular2-router-loader plugin might not be Windows safe, will look into it.
from angular-webpack-starter.
DzmitryShylovich
commented on July 20, 2024
I did:
npm start. worked fine on port 3000npm run server:prod. no errors in the console but i was not able to openlocalhost:8088
then I triednpm run compile
from angular-webpack-starter.
qdouble
commented on July 20, 2024
@DzmitryShylovich looking at this part, it seems that Windows is removing the slashes in the directory path, which leads to the module not being found
Module not found: Error: Can't resolve '..compiledapp
eatureslazyindex.ngfactory' in 'D:\Workspace\angular2webpack2-starter\src\app'
That part should really be ../compiled/app/features/lazy/index.ngfactory
from angular-webpack-starter.
DzmitryShylovich
commented on July 20, 2024
- npm run server:prod. no errors in the console but i was not able to open localhost:8088
hmm for some reason npm run prodserver doesn't work and I have to start server myself with node prodserver
from angular-webpack-starter.
DzmitryShylovich
commented on July 20, 2024
seems that Windows is removing the slashes in the directory path, which leads to the module not being found
you are right.
from angular-webpack-starter.
qdouble
commented on July 20, 2024
hmm for some reason npm run prodserver doesn't work and I have to start server myself with node prodserver
@DzmitryShylovich
strange that npm run prodserver wouldn't work when the script for that is literally "prodserver": "node prodserver"
I'll speak with brandon when he gets on about editing the angular2-router-loader, I'm assuming it would need to escape the characters in a Windows friendly format
from angular-webpack-starter.
DzmitryShylovich
commented on July 20, 2024
strange that npm run prodserver wouldn't work when the script for that is literally "prodserver": "node prodserver"
for some reason npm doesn't execute the second command from "npm run watch:prod & npm run prodserver". It's not a problem because I don't need this server anyway but it's strange :)
I'll speak with brandon when he gets on about editing the angular2-router-loader, I'm assuming it would need to escape the characters in a Windows friendly format
I cannot find github repo for angular2-router-loader. Do u have a link? Or it's not publicly available?
from angular-webpack-starter.
qdouble
commented on July 20, 2024
@DzmitryShylovich well on linux/Mac you could just use the & command to run two commands in parallel or the | symbol, but I suppose I may need to explore something more Windows friendly... have you had any experience with concurrently? https://github.com/kimmobrunfeldt/concurrently/ Thinking about using that one.
The link to the router loader repo is here: https://github.com/brandonroberts/angular2-router-loader
from angular-webpack-starter.
DzmitryShylovich
commented on July 20, 2024
That's my issue http://stackoverflow.com/q/30950032. I'll try to use concurrently.
from angular-webpack-starter.
DzmitryShylovich
commented on July 20, 2024
npm install npm-run-all --save-dev
and pakage.json
"server:prod": "npm-run-all -p -r watch:prod prodserver",
http://stackoverflow.com/a/38213212
from angular-webpack-starter.
brandonroberts
commented on July 20, 2024
I'll add an OS check to the loader an use the appropriate path node API
from angular-webpack-starter.
qdouble
commented on July 20, 2024
@brandonroberts cool 👍
@DzmitryShylovich just added npm-run-all and did some script mods: https://github.com/qdouble/angular2webpack2-starter/pull/9/files
from angular-webpack-starter.
brandonroberts
commented on July 20, 2024
@qdouble @DzmitryShylovich version 0.1.1 has been published. Let me know if you still have issues: https://www.npmjs.com/package/angular2-router-loader
from angular-webpack-starter.
DzmitryShylovich
commented on July 20, 2024
Rendering Complete, saving .css file...
Wrote CSS to D:\Workspace\angular2webpack2-starter\src\app\app.css
Wrote 1 CSS files to D:\Workspace\angular2webpack2-starter\src
> [email protected] clean:compile D:\Workspace\angular2webpack2-starter
> npm run rimraf -- "src/compiled"
> [email protected] rimraf D:\Workspace\angular2webpack2-starter
> rimraf "src/compiled"
> [email protected] build:aot D:\Workspace\angular2webpack2-starHash: bf1ad559af891e3ca4a2 Version: webpack 2.1.0-beta.22 Time: 7833ms [0] ./src async 160 bytes {0} [built]
+ 349 hidden modules
ERROR in ./src/compiled/app/app.module.ngfactory.ts
Module build failed: ReferenceError: newPath is not defined
at Object.module.exports.normalizeFilePath (D:\Workspace\angular2webpack2-starter\node_modules\angular2-router-loader\src\utils.js:35:12)
at D:\Workspace\angular2webpack2-starter\node_modules\angular2-router-loader\src\index.js:43:22
at RegExp.[Symbol.replace] (native)
at String.replace (native)
at Object.module.exports (D:\Workspace\angular2webpack2-starter\node_modules\angular2-router-loader\src\index.js:26:31)
@ ./src/main.browser.aot.ts 6:29-75
Child html-webpack-plugin for "index.html":
+ 4 hidden modules
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:aot"
npm ERR! node v6.3.0
from angular-webpack-starter.
DzmitryShylovich
commented on July 20, 2024
https://github.com/brandonroberts/angular2-router-loader/blob/master/src/utils.js#L35 newPath is not defined
from angular-webpack-starter.
DzmitryShylovich
commented on July 20, 2024
I've changed normalizeFilePath to
module.exports.normalizeFilePath = function(filePath) {
if (os.platform() === 'win32') {
return filePath.replace(/\//g, '\\');
}
return filePath;
}
but the same error (with one and 2 backslashes)
from angular-webpack-starter.
brandonroberts
commented on July 20, 2024
Version 0.1.3 has been published. @DzmitryShylovich helped me sort out the issue with Windows.
from angular-webpack-starter.
qdouble
commented on July 20, 2024
@brandonroberts great, I updated the package (even thought the carat symbol should handle that already 😀 )
from angular-webpack-starter.
Related Issues (20)
- file is not exists
- Error in universal:AOT build: Cannot find module './ngfactory/app/server.app.module.ngfactory'. HOT 3
- How to add fonts HOT 3
- Can you rename the repository? HOT 2
- warnings when running `yarn` HOT 1
- AOT and platform-browser-dynamic HOT 1
- Is there a simple example that mimics communication between sibling components? HOT 1
- Is this project still active ? HOT 1
- Http(Client)Module has changed
- Typescript source maps HOT 2
- Webpack 4 / Angular 6 HOT 7
- yarn test failing HOT 2
- Ability to skip bundle analysis for CI prod builds HOT 1
- Getting "Cannot find module 'zone.js/dist/zone-node'" when deploying on production server HOT 6
- Can't run tests, at-loader can't find .ts files! HOT 1
- Getting error running Universal out of the box HOT 3
- Can you please add comments to your code. HOT 1
- How to see karma output in debug window? HOT 6
- Issue with npm/Yarn Install HOT 2
- Angular 7 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-webpack-starter.