無法在Plnkr中加載app.component.html

Question

Plnkr鏈接： https ://plnkr.co/edit/910M73kwYKc8xPlSIU57 ? p = preview

目錄：

app.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { routes } from './app.routing';

import { AppComponent } from './app.component';
// import { LoginComponent } from './login/login.component';
// import { AuthService } from './shared/services/auth.service';


@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(routes)
    ],
    declarations: [
        AppComponent,
        // LoginComponent
    ],
    providers: [
        // AuthService,
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

app.component

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    ngOnInit() {
        console.log('oninit')
    }
}

Answer 1

Angular無法解析app.component.html相對路徑。
只需將./app.component.html替換為src/app.component.html ，就可以了。

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

    @Component({
        selector: 'my-app',
        templateUrl: 'src/app.component.html'
    })
    export class AppComponent implements OnInit {
        ngOnInit() {
            console.log('oninit')
        }
    }

還有其他選擇可以做到這一點，但是angular-cli或webpack自己處理相對路徑更可取。