问题
Hello I've just created a new project from the CLI using the simple
ng new frontend
command however once I go into my project to:
cd frontend/src/app
and try to generate a new component like so
ng generate component about
I get the following error message in my terminal(MacOS): Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
I have installed Angular 2 globally and when I run my
ng --version
I receive the following:
Angular CLI: 6.0.0
Node: 8.11.1
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.6.0
@angular-devkit/core 0.6.0
@angular-devkit/schematics 0.6.0
@schematics/angular 0.6.0
@schematics/update 0.6.0
rxjs 6.1.0
typescript 2.7.2
inside of my Angular.json I have:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"frontend": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/frontend",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "frontend:build"
},
"configurations": {
"production": {
"browserTarget": "frontend:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "frontend:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"frontend-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "frontend:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "frontend"
}
And digging even further: package.json
{
"name": "frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.0",
"@angular/cli": "~6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "~2.7.2"
}
}
What I've tried:
I have tried reinstalling Angular. I have confirmed my TypeScript is up to date. my NPM is up to date and so on. I've created a new project following the most basic steps of the tutorial provided at Angular.io to no avail.
If anyone can lecture me on what is going wrong here I'd greatly appreciate it.
While drafting this post I had the brilliant idea of running this process through my IDE's terminal and shockingly ng generate component about worked without a problem. However being curious and wanting to know what is wrong with my native terminal I figured I'd post after all.
EDIT 2:
So random thought popped in my head plain and simple File Permissions...yup
using sudo ng g c about worked. So there you have it I suppose. Hopefully this was helpful to someone out there.
回答1:
you should run this command 'ng g c component-name' inside is app folder.
1) cd src/app 2) ng g c component name
回答2:
In my case, the problem was in angular.json file. I had to remove all the 'projectname-e2e' project at the angular.json file for fix this issue.
回答3:
Using Angular@7 ng g c works from the root app folder. No need to change anything - just run from the base directory something like
ng g c features/shopping-list/components/shopping-list-edit
=>
CREATE src/app/features/shopping-list/components/shopping-list-edit/shopping-list-edit.component.ts (316 bytes)
回答4:
The code for generating a component and resolving closest NgModule is quite straightforward. You can find it here https://github.com/angular/devkit/blob/master/packages/schematics/angular/component/index.ts
It doesn't depend on the typescript, npm etc. version. Only on the @angular/cli version (and indirectly on the devkit) which in your case is the latest. All should be working find, at least it does on my end.
回答5:
Change root to the directory where your module is in angular.json
From:
root:""
to directory of app module:
root: "/src/app"
回答6:
Could not find ngModule can be solved by passing --module=<path to app.module.ts>
There are multiple ways to fix this issue one among them is as follows,
ng g c components/list-template --module=modules/app.module.ts
For other options with respect to generate component is here https://angular.io/cli/generate#component
来源：https://stackoverflow.com/questions/50273995/angular2-could-not-find-an-ngmodule