Angular 6 custom project architecture

Starting from the Angular 6.x I can put the project files anywhere.

I have the "projects" folder in the root folder and regular app folder placed into the folder with project name inside the "projects" folder: (ROOT -> projects -> {{ project name }} -> ( index.html/main.ts here ) app ( components here ).

node_modules placed in the root folder for the all projects.

angular.json, tsconfig.json, package.json all are placed in the root folder.

Project works fine.

But I see the warnings (only in the IDE, terminal is clean with very strict TypeScript settings) in the HTML templates for all Angular "tags" (that show where to insert the Angular components), also, component's .ts file doesn't "understand" that some class properties/methods are called from the template. Also, paths to the .html template and .scss files that placed in the component's decorator (templateUrl and styleUrls) aren't clickable anymore.

Can I fix the problem with current project configuration? I have the project group that should use this new feature from the latest Angular version so it would be great if I can add the same support as for the older Angular version (for the regular project architecture).

9 comments
Comment actions Permalink

Please can you share a sample project I can use to recreate the issues? Screenshots that illustrate them would be helpful as well

0
Comment actions Permalink

My question is more about this: which file/files is/are responsible for the custom HTML syntax for the Angular templates and connection to the component? I guess, IDE just doesn't know where to get this custom things and then looks at the HTML file as in the regular HTML template.

Project works fine at the paranoic TypeScript settings, makes build, etc.

Project structure:
|--angular.json
|--package.json
|--tslint.json
|--node_modules
|--projects
|--site
|--index.html
|--main.ts
|--tsconfig.app.json
|--typings.d.ts
|--app (folder with app.module.ts, components, etc)
|--assets (folder with assets, like in previous Angular versions)


angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"site": {
"root": "",
"sourceRoot": "projects/site",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "projects/site/dist",
"index": "projects/site/index.html",
"main": "projects/site/main.ts",
"tsConfig": "projects/site/tsconfig.app.json",
"polyfills": "projects/site/polyfills.ts",
"assets": [
"projects/site/assets",
"projects/site/favicon.ico"
],
"styles": [
"projects/site/styles/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "environment/environment.ts",
"with": "environment/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "site:build"
},
"configurations": {
"production": {
"browserTarget": "site:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "site:build"
}
},
"test": {},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/site/tsconfig.app.json",
"projects/site/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
}
}
0
Comment actions Permalink

>which file/files is/are responsible for the custom HTML syntax for the Angular templates and connection to the component? 

I don't understand your question, sorry. If Angular support is enabled, WebStorm treats your HTML files as Angular templates - recognizes your custom components/properties, etc. To enable Angular support, you have to make sure that @angular node_modules are installed and included in project (i.e. not marked excluded)

0
Comment actions Permalink

I have node_modules in the project root with installed Angular version (once again - I can create build for the project, everything works perfectly with strict TypeScript settings). But any non-native HTML syntax marked as invalid by IDE.

Everything was fine, this problem started when project architecture changed and project sources was moved from the "src" in the project root to the "projects/site"

0
Comment actions Permalink

>I have node_modules in the project root with installed Angular version

is @angular module included? Please attach a screenshot of the project tool window with node_modules folder expanded

>this problem started when project architecture changed and project sources was moved from the "src" in the project root to the "projects/site"

changing src folder name shouldn't affect this; please share a project that can be used to recreate the issue
 
0
Comment actions Permalink

> changing src folder name shouldn't affect this; 

It wasn't just renamed, it moved on the 1 level deeper. root -> src now is root -> projects -> site

> please share a project that can be used to recreate the issue

Did you try to use angular.json above and architecture from the previous comment?

> Please attach a screenshot of the project tool window with node_modules folder expanded

Yes, it's included, in the any other case I won't be able to make the build.

0
Comment actions Permalink

>yes, it's included, in the any other case I won't be able to make the build.

from your screenshot I can clearly see that it's _excluded_ (note the color). Angular support can only be enabled if the corresponding @angular modules are included in index; this is normally done automatically - WebStorm scans the direct dependencies in root package.json and auto-adds them as javascript libraries so that they are indexed. You must have disabled/deleted to library

0
Comment actions Permalink

Thank you, now it works.

The question remains - why it worked earlier for years (I always kept the node_modules in as excluded folder) and broke only now?

0
Comment actions Permalink

>The question remains - why it worked earlier for years (I always kept the node_modules in as excluded folder) and broke only now?

 

It had never worked with excluded modules - having @angular included has always been a requirement.

Note that WebStorm auto-excludes node_modules, but direct dependencies listed in package.json are auto-added to JavaScript Libraries and thus indexed. You must have removed/disabled the library recently, causing the issue

0

Please sign in to leave a comment.