如何在jhipster的角度应用程序中包含css和js文件等资源文件？

Question

I have been trying to include resource files in my jhipster angular 2 app but stuck in the issue for 3 days. So far i have found, angular 2 is webpack based configured in this app. i tried implementing through angular-cli.json and vendor.ts too. i even tried to include the files in index.html file. unfortunately, there's no any change in my dumb app. Responses are appreciable. Thanks!

Answer 1

Assuming you are running a working setup and launched hot reloader using yarn start , there are several use cases to include "assets", as CSS/JS

a global stylesheet

All global stylesheets can be placed in the file global.(s)css and changes immediately trigger a hot reload.

a component stylesheet

You might want to give a certain angular component a stylesheet, which is encapsulated to that component. Then you add a some.component.css (or scss) next to some.component.ts and embed it this way:

@Component({
    selector: 'jhi-some-component',
    templateUrl: './some.component.html',
    styleUrls: [
        'some.component.scss'
    ]
})
export class SomeComponent
//...

as global styles, component styles trigger a hot reload on change.

vendor stylesheets

you can place them into vendor.(s)css . To make changes to that file take effect, a restart of the yarn start is needed

assets in general

Webpack tries to resolve all mentioned assets relatively to their files to include them. That way you can use any asset you want. If Webpack will have problems to resolve any asset, it will let you know that.

You mentioned also JS, but I don't get the sense of using JS resource, as Typescript is used in the angular client.