search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.78k stars 11.98k forks source link

ERROR in AppModule is not an NgModule #4594

Closed tHesTx closed 7 years ago

tHesTx commented 7 years ago

Please provide us with the following information:

OS?

Windows 7

Versions.

ng --version @angular/cli: 1.0.0-beta.31 node: 7.2.0 os: win32 x64 @angular/common: 2.4.7 @angular/compiler: 2.4.7 @angular/core: 2.4.7 @angular/forms: 2.4.7 @angular/http: 2.4.7 @angular/platform-browser: 2.4.7 @angular/platform-browser-dynamic: 2.4.7 @angular/router: 3.4.7 @angular/cli: 1.0.0-beta.31 @angular/compiler-cli: 2.4.7 @ngtools/webpack: 1.2.9

$ npm list -g --depth=0 C:\Users\Macpro\AppData\Roaming\npm +-- @angular/cli@1.0.0-beta.31 +-- cordova@6.5.0 +-- grunt-cli@1.2.0 +-- http-server@0.9.0 +-- ionic@2.2.1 +-- minimatch@3.0.3 +-- node-uuid@1.4.7 +-- npm@4.2.0 `-- typescript@2.1.6

Repro steps.

I've tried to update the angular-cli with these steps: https://github.com/angular/angular-cli#updating-angular-cli

I've done global update and local project as well, all good until I try to serve the app - it gives me the below error

The log given by the failure.

$ ng serve

ERROR in AppModule is not an NgModule ERROR in ./src/main.ts Module build failed: TypeError: Cannot read property 'newLine' of undefined at Object.getNewLineCharacter (C:\Users\Macpro\Desktop\Test\Angular2\Angular2\CLI\puzzleTest\node_modules\typescript\lib\typescript.js:8062:20) at Object.createCompilerHost (C:\Users\Macpro\Desktop\Test\Angular2\Angular2\CLI\puzzleTest\node_modules\typescript\lib\typescript.js:44978:26) at Object.ngcLoader (C:\Users\Macpro\Desktop\Test\Angular2\Angular2\CLI\puzzleTest\node_modules\@ngtools\webpack\src\loader.js:341:33) @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts webpack: Failed to compile.

I also got this "minimatch" errror every time I try to update or install somtehing: npm update -g

npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

But as you can see above I have "minimatch@3.0.3" - anyway this is not the problem here

Mention any other details that might be useful.

I've tried to update the typescript like I've seen on the web but with no success. I also

Thank you for your time!

SanderElias commented 7 years ago

I got the same problem. On ubuntu 16. But only on the first build: image The only change I made was adding an empty line to the app.module.ts

dessalines commented 7 years ago

Don't ask me why, but I think this is a yarn issue. Running 

rm -rf node_modules
npm i
ng serve

fixes the problem, but the problem remains if you do yarn instead of npm i.

EDIT: another thing that worked was reinstalling yarn : https://yarnpkg.com/lang/en/docs/install/#linux-tab

pinalbhatt commented 7 years ago

Thanks @dessalines Not sure whats issue with yarn but your instructions worked.

SanderElias commented 7 years ago

Ok, I reinstalled yarn using my package manager, removed the node_moduls. used yarn to install. Problem stays the same. removed node_modules yet again, and used npm to install, the problem goes away. Even if you use yarn after that.

conclusion. This problem happens and is reproducible if you use yarn to install your packages. (which is a shame, as yarn is at least 2 times faster in my situation.)

reason (an educated guess!): As yarn is more strict on installing, it probably forces a slightly older dependency in the tree somewhere.

djedje72 commented 7 years ago

This problem seems to occur with Typescript 2.1.6.

If you clean your node modules, change Typescript to typescript@2.1.5 and do a yarn install or npm install, the problem should be resolved.

tHesTx commented 7 years ago

So, for me, should I install this yarn? I do not use it

SanderElias commented 7 years ago

@tHesTx, no, just use npm install instead. For me, the problem occurs when I use yarn instead. It is solved if I use npm. Also, in my case it was just on the first run, after that it worked ok.

djedje72 commented 7 years ago

@SanderElias Yes it was just on the first run for ng serve but can you do ng build? @tHesTx i think you can do npm install if you don't use yarn

tHesTx commented 7 years ago

I don't know what to do anymore, nothing works. DO I have to update something in package.json or angular-cli.json in my project ? Building gives the same error

djedje72 commented 7 years ago

@tHesTx For me, i'd to change "typescript": "2.1.6" to "typescript":"2.1.5" in my package.json file because i use local typescript version.

If you use global version, you can try: npm uninstall -g typescript then npm install -g typescript@2.1.5

tHesTx commented 7 years ago

@djedje72 I've done that, currently is set to "typescript": "2.1.5". Before to do the first angular-cli update which got me to this point it was like this: "typescript": "~2.0.3". Uninstall and reinstall too. I've also updated the "@angular/cli": "1.0.0-beta.24", "angular-cli": "1.0.0-beta.24", from "devDependencies" to 31, in angular-cli.json: "version": "1.0.0-beta.24", -> to 31 as well. PS: If I do these changes before npm install, when I run npm install gives me some errors about the CLI version, somthing like the requested(beta.31) version not exists

tHesTx commented 7 years ago

Ok, I've generated a new app with angular-cli which works, but in package.json it uses this: "typescript": "~2.0.0" - but I have installed 2.1.5 globally. Why is that?

aviramga commented 7 years ago

Your local Typescript version doesn't necessarily have to match your global. CLI generates a package.json with default dependencies it requires, but you can (and should) updated them according to your needs.

I actually had an issue trying to run angular-2.4.7 with typescript 2.0.0 but after updating my project's package.json with typescript 2.1.6 the issue was resolved. I assume if you do the same it will resolve your issue as well.

goodnessSquad

SanderElias commented 7 years ago

Just did an update today, to latest cli and Angular 4. this is still happening: image

Only on the first compile, afterwards it works.

NOTE, this only happens if you installed the project with YARN, not with NPM install

hansl commented 7 years ago

This is a disconnect between Angular 4 and 2.4 that happens in some cases. You probably have an @angular/core version in the CLI node_modules that is different than your application's node_modules.

Try with the RC.0, we did fix a few of those mismatch. Also, try to clear your node_modules and reinstall.

SanderElias commented 7 years ago

@hansl I can confirm the problem is now gone. Even with a yarn installed project!

frenkan commented 7 years ago

I had similar issue with yarn. My problem was resolved by deleting the yarn.lock file and re-running the yarn command.

Marcidius commented 7 years ago

FYI, a fix for me was to downgrade to typescript "2.0.2" while keeping cli version at "1.0.0-rc.2".

rajinder-yadav commented 7 years ago

I am seeing this error when I install using yarn after upgrading to "@angular/cli": "^1.0.0-rc.4".

I don't not see this problem if I do npm install, only when I install using yarn.

Also I have deleted node_modules folder and my yarn.lock file.

Here is my package.json file.

{
  "name": "routes",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.10",
    "@angular/compiler": "^2.4.10",
    "@angular/core": "^2.4.10",
    "@angular/forms": "^2.4.10",
    "@angular/http": "^2.4.10",
    "@angular/platform-browser": "^2.4.10",
    "@angular/platform-browser-dynamic": "^2.4.10",
    "@angular/router": "^3.4.10",
    "@types/node": "^6.0.65",
    "codelyzer": "^2.0.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.2.0",
    "ts-helpers": "^1.1.2",
    "tslint": "^4.5.1",
    "zone.js": "^0.7.8"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0-rc.4",
    "@angular/compiler-cli": "^2.4.10",
    "@types/jasmine": "^2.5.46",
    "@types/node": "^6.0.65",
    "codelyzer": "^2.0.1",
    "jasmine-core": "^2.5.2",
    "jasmine-spec-reporter": "^2.7.0",
    "karma": "^1.5.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-remap-istanbul": "^0.2.2",
    "protractor": "^4.0.14",
    "tachyons": "^4.6.2",
    "ts-node": "^1.7.3",
    "tslint": "^4.5.1",
    "typescript": "^2.2.1"
  }
}
Arnaud73 commented 7 years ago

Same thing here. I upgraded easily from beta.28 to rc.0, then rc.1 and rc.2. However, I face the same problem when upgrading to rc.4. I had to revert to rc.2 for my app to build again.

Here is my package.json:

    "name": "my-app",
    "version": "0.0.1",
    "license": "UNLICENSED",
    "angular-cli": {},
    "scripts": {
        "ng": "ng",
        "hmr": "ng serve --hmr -e=hmr",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "pree2e": "webdriver-manager update --standalone false --gecko false",
        "e2e": "protractor"
    },
    "private": true,
    "dependencies": {
        "@angular/common": "^2.4.0",
        "@angular/compiler": "^2.4.0",
        "@angular/core": "^2.4.0",
        "@angular/forms": "^2.4.0",
        "@angular/http": "^2.4.0",
        "@angular/material": "2.0.0-beta.2",
        "@angular/platform-browser": "^2.4.0",
        "@angular/platform-browser-dynamic": "^2.4.0",
        "@angular/router": "^3.4.7",
        "@angularclass/hmr": "^1.2.2",
        "@covalent/core": "^1.0.0-beta.2-1",
        "@ngrx/core": "^1.2.0",
        "@ngrx/effects": "^2.0.1",
        "@ngrx/store": "^2.2.1",
        "@ngrx/store-devtools": "^3.2.3",
        "@ngx-translate/core": "^6.0.0",
        "@ngx-translate/http-loader": "^0.0.3",
        "angular2-jwt": "^0.1.28",
        "angular2-moment": "^1.3.3",
        "core-js": "^2.4.1",
        "hammerjs": "^2.0.8",
        "karma-phantomjs-launcher": "^1.0.2",
        "lodash": "^4.17.4",
        "merge-options": "0.0.64",
        "phantomjs-prebuilt": "^2.1.14",
        "rxjs": "^5.1.0",
        "ts-helpers": "^1.1.1",
        "zone.js": "^0.7.6"
    },
    "devDependencies": {
        "@angular/cli": "1.0.0-rc.2",
        "@angular/compiler-cli": "^2.4.0",
        "@types/jasmine": "^2.5.46",
        "@types/lodash": "^4.14.57",
        "@types/node": "^7.0.10",
        "codelyzer": "~2.0.0",
        "jasmine-core": "2.5.2",
        "karma": "1.4.1",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-coverage-istanbul-reporter": "^0.2.0",
        "karma-jasmine": "^1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.0",
        "ts-node": "2.0.0",
        "tslint": "^4.4.2",
        "typescript": "~2.2.1"
    }
}
b-johnse commented 7 years ago

I also had to revert back to rc2 from rc4 in order to have my ng serve work again. As previously mentioned, works with npm install but not with yarn

dessalines commented 7 years ago

Downgrading typescript to 2.0.2 and keeping 1.0.0-rc.2 is what worked for me.

taye commented 7 years ago

In my case, the problem was that @angular/cli and it's related tools didn't believe in using export default to export anything so trying to import submodules with import name from './module' syntax just imported undefined instead. Avoiding default exports solved this issue for me.

Arnaud73 commented 7 years ago

I tested upgrading to @angular/cli 1.0.0and it seamed to work, except I'm using angular material and Covalent, both of them not yet compatible with Angular 4.

sunflower8th commented 7 years ago

{ "name": "admin2", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "start": "ng serve", "test": "ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/animations": "~4.0.0", "@angular/common": "~2.3.1", "@angular/compiler": "~2.4.1", "@angular/core": "~2.3.1", "@angular/forms": "~2.3.1", "@angular/http": "~2.3.1", "@angular/platform-browser": "~2.3.1", "@angular/platform-browser-dynamic": "~2.3.1", "@angular/router": "~3.3.1", "angular-eonasdan-datetimepicker": "~0.3.9", "angular-in-memory-web-api": "~0.3.1", "bootstrap": "~3.3.7", "bootstrap-datepicker": "~1.6.4", "chart.js": "~2.5.0", "core-js": "~2.4.1", "datatables.net": "~1.10.13", "datatables.net-dt": "~1.10.13", "echarts": "~3.4.0", "eonasdan-bootstrap-datetimepicker": "~4.17.47", "jquery": "~3.1.1", "jquery-ui-dist": "~1.12.1", "moment": "~2.18.1", "ng2-bootstrap": "~1.6.3", "ng2-charts": "~1.5.0", "ng2-toastr": "~1.6.0", "ng2-translate": "5.0.0", "portfinder": "1.0.9", "rxjs": "~5.0.0", "tether": "~1.4.0", "tinymce": "4.5.3", "ts-helpers": "~1.1.1", "zone.js": "~0.7.2", "ztree": "3.5.24" }, "devDependencies": { "@angular/cli": "^1.0.3", "@angular/compiler-cli": "2.4.1", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.3.0", "typescript": "2.0.10" } } I have the same question,what can I do?

SanderElias commented 7 years ago

@lilingling3 Make sure you update all your dependencies to the same version. I see:

"@angular/animations": "~4.0.0", "@angular/common": "~2.3.1", "@angular/compiler": "~2.4.1",

3 different angular versions! If you are updating your project, make sure you have the same version on all @angular stuff for use. I would recommend the last stable version (currently 4.1.2). Fix the package.json. delete node_modules and run npm install again. (or the yarn version of that)

sunflower8th commented 7 years ago

Before I used angular-cli ，I use angular/cli now.

cport1 commented 7 years ago

I can also produce this error only when using yarn instead of npm install

pumano commented 7 years ago

@cport1 same for me.

kleber-swf commented 7 years ago

I have this problem after a npm update with typescript 2.3.2. I don't know if it's related but the first time I forgot to stop the project before I executed the command and it give me an error about not being able to delete some files. I had to delete the entire node_module folder and execute a npm install to fix it.

zhou3q commented 7 years ago

I also get this error.Watch tips below. image I change pachage.json typescript to 2.2.2,then delete node_modules, re npm install,and ng serve.Wo pass.

sjswoboda commented 7 years ago

Still happening for us with npm. Using angular version 4.2.6 and angular material with typescript 2.2.3 (also tried 2.3 and 2.4).

IsNull commented 7 years ago

@sjswoboda Did you find anything to resolve the issue? This is haunting us for the past week and wasting away our time. Using Typescript 2.1.5 is not an option as Angular Material is not working with it, and newer versions all end up with xy is not an NgModule

sjswoboda commented 7 years ago

@IsNull -- we've been through so many errors in the past few weeks, so I cannot remember what fixes what. Based on our change logs, the issue appears to be:

"@angular/animations": "4.2.6",
"@angular/common": "4.2.6",
"@angular/compiler": "4.2.6",
"@angular/compiler-cli": "4.2.6",
"@angular/core": "4.2.6",
"@angular/forms": "4.2.6",
"@angular/http": "4.2.6",

We have since upgraded to 4.3.4 and that is working fine for us. We are using TypeScript 2.4.1 and angular/cli is 1.2.1. So far, we haven't seen these errors again (don't worry, once you resolve these, you'll just get different problems).

I am sorry I can't be of more help.

IsNull commented 7 years ago

@sjswoboda Thank you for your support. We have startet tackling the issue (or issues) down and make it reproducible #7384. What I know for sure is that subsets of the now problematic libraries have worked in the same environment. Which is a clear indication that a very nasty error is at the core of all this - some constellation of configuration, dependencies or actual code in use will trigger it.

(don't worry, once you resolve these, you'll just get different problems)

There are so many layers, configurations and involved tools, and the error messages are not really helping. Im still amazed how complicated this all turned out. 😅

IsNull commented 7 years ago

@sjswoboda The cause in our case was that we used to export the index.ts files by omiting their name:

export * from 'components/myfeature' (to export components/myfeature/index.ts) However, this is not supported by ng/ngc and as a workaround we had to explicitly name the index: export * from 'components/myfeature/index'

However, all the tooling and standards explicitly allow to omit the index name...

See #7394 for the bug report.

sjswoboda commented 7 years ago

@isNull -- yes absolutely! That's one thing we had to do as well. We explicitly reference the index file as well. Sorry; I had forgotten that we had also done that.

haidaraM commented 7 years ago

I had this issue when I upgraded yarn to 1.2.1. If I rollback to 1.0.0, it works. Maybe there is a newer version between 1.0.0 and 1.2.1 that works. I will keep 1.0.0 for the moment

javahaxxor commented 6 years ago

just ran into this issue upgrading from angular-cli 1.3 to 1.5.5. Removed node_modules , reinstalled with NPM - same. Removed node_modules, reinstalled with yarn - same. Removed node_modules, removed all yarn-related files, reinstalled with npm, and it worked. VERY strange

HaithamMaya commented 6 years ago

I ran into this same issue, and I don't use yarn. Here is the only way it fixed it for me:

rm -rf node_modules package-lock.json
npm install 
ng s
sanyooh commented 6 years ago

I ran into the same issue, this fixed it for me, see reference here: https://github.com/angular/angular-cli/issues/6425

Here are the versions I used to get it running:

yarn: 1.1.0, angular-cli: 1.4.7, typescript: 2.2.2

Fred-JulieDesk commented 5 years ago

I ran into the same issue myself with Yarn, using this package.lock =>

 "dependencies": {
    "@angular/animations": "4.4.7",
    "@angular/cdk": "2.0.0-beta.10",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/compiler-cli": "^4.2.2",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "2.0.0-beta.10",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/platform-server": "^4.2.2",
    "@angular/router": "^4.0.0",
    "@ngui/tooltip": "^0.5.1",
    "@ngx-translate/core": "^6.0.0",
    "@ngx-translate/http-loader": "^0.1.0",
    "@types/intro.js": "^2.4.3",
    "@types/protractor-http-mock": "0.0.33",
    "@types/underscore": "^1.8.1",
    "aes-js": "3.1.0",
    "angular2-fontawesome": "~0.9.0",
    "angular2-oauth2": "^1.3.10",
    "angular2-tooltip": "^3.1.0",
    "core-js": "^2.4.1",
    "crypto-js": "3.1.9-1",
    "font-awesome": "~4.7.0",
    "intro.js": "^2.9.3",
    "jquery": "^3.2.1",
    "jqueryui": "^1.11.1",
    "jsuri": "^1.3.1",
    "localize-router": "^0.7.0",
    "ng2-accordion": "0.0.15",
    "ng2-selectize": "^1.0.1",
    "ngx-bootstrap": "^1.7.1",
    "ngx-tooltip": "0.0.9",
    "npm": "^5.8.0",
    "rxjs": "^5.1.0",
    "selectize": "^0.12.4",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.2.6",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng-mock-e2e": "~0.1.3",
    "protractor": "~5.1.0",
    "protractor-http-mock": "^0.9.2",
    "string-replace-loader": "^2.1.1",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "2.2.0"
  }

Which produced the same error as outlined above.

In my case the problem was the installed Typescript version that seems to not be compatible with the @angular/cli version

After upgrading to Typescript 2.3.4, I got it working fine, and could use AOT compiler with yarn

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.