Repository navigation
Ivy: enableIvy:true ng start rebuild causes custom directive not to be created #31560
Description
🐞 Bug report
Command (mark with an x)
- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc
Is this a regression?
Unknown
Description
When "enableIvy": true and using npm start - custom directives are not created if template file where they are used is changed and the project rebuilt.
🔬 Minimal Reproduction
- Create new app with Ivy enabled and add a directive
npx @angular/cli new test01 --enable-ivy --defaults
cd test01
npm run ng -- generate directive test-directive
- Open the file
test-directive.directive.ts - Add
console.log('directive constructor');in theTestDirectiveDirectiveclass constructor code just to monitor directive creation and save the file - Open
app.component.htmland place the directive attributeappTestDirectiveat the<h1 appTestDirective>element (or any other element - does not matter) and save the file - Serve the app
npm start
- Open http://localhost:4200, open developer tools and refresh the browser - you should see "directive constructor" logged in the browser console
- Change anything in the
app.component.html(you can even change the text of the first line which is an HTML comment)
What happens:
The application rebuilds and reloads but you no longer see "directive constructor"
The only way to bring directive back is to restart the npm start
The problem happens with both Node 10.9.0 and Node 12.6.0.
Similar problem occurs with pipes but after changing something in the app.component.html where the pipe is used, app rebuilt and browser refreshed, there is an error in the browser console:
main.ts:12 Error: The pipe 'testPipe' could not be found!
at getPipeDef$1 (core.js:30810)
at Module.ɵɵpipe (core.js:30776)
at AppComponent_Template (app.component.html:8)
at executeTemplate (core.js:14533)
at checkView (core.js:15957)
at componentRefresh (core.js:15715)
at refreshChildComponents (core.js:14214)
at refreshDescendantViews (core.js:14120)
at ComponentFactory$1.create (core.js:28413)
at ApplicationRef.bootstrap (core.js:35354)
The problem disappears as soon as you opt out of Ivy usage by changing tsconfig.app.json angularCompilerOptions to:
"angularCompilerOptions": {
"enableIvy": false
}
🔥 Exception or Error
🌍 Your Environment
C:\dev\tests\ng8\test01>npm run ng -- version
> test01@0.0.0 ng C:\dev\tests\ng8\test01
> ng "version"
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.1.1
Node: 10.9.0
OS: win32 x64
Angular: 8.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.801.1
@angular-devkit/build-angular 0.801.1
@angular-devkit/build-optimizer 0.801.1
@angular-devkit/build-webpack 0.801.1
@angular-devkit/core 8.1.1
@angular-devkit/schematics 8.1.1
@ngtools/webpack 8.1.1
@schematics/angular 8.1.1
@schematics/update 0.801.1
rxjs 6.4.0
typescript 3.4.5
webpack 4.35.2
package.json dependencies:
"dependencies": {
"@angular/animations": "~8.1.1",
"@angular/common": "~8.1.1",
"@angular/compiler": "~8.1.1",
"@angular/core": "~8.1.1",
"@angular/forms": "~8.1.1",
"@angular/platform-browser": "~8.1.1",
"@angular/platform-browser-dynamic": "~8.1.1",
"@angular/router": "~8.1.1",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.801.1",
"@angular/cli": "~8.1.1",
"@angular/compiler-cli": "~8.1.1",
"@angular/language-service": "~8.1.1",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}
Anything else relevant?
Activity
varadero commentedon Jul 15, 2019
Please close this if similar to (or same as):
#31512
#31528
gkalpak commentedon Jul 15, 2019
Thx for reporting this (and for looking for similar issues) 👍
I am going to close this one, since (a) it uses older than
@nextversions of the Angular packages and (b) it does indeed look similar to #31512.Please, follow #31512 and open a new issue if your problem is not fixed by the fix for #31512.
angular-automatic-lock-bot commentedon Sep 15, 2019
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.