In this lecture, we are going to create custom asset paths in our project to understand why we need
to talk about the behavior of FFmpeg.
As we discussed before, FFmpeg MPEG is split into two packages.
The core package exports FFmpeg as a WebAssembly file.
The F MPEG package exposes a JavaScript API for interacting with FFmpeg.
One of the jobs of the FFmpeg package is to import the core package.
We don't need to manually import this package.
It's your job performed by the FFmpeg package.
It's a convenient feature, but it does present some problems.
The files are loaded through.
They're not bundled with our project.
The files are stored in the following directory node modules Slash at FFmpeg slash core slash distribution
Angular is a front end framework.
It provides a development server for delivering files via a local server.
By default, files in the Node Modules directory are not publicly accessible through A2DP.
In my browser, I'm trying to access one of the files in this directory, as you can see, the development
server is unable to find this file.
It'll default to serving our angular app.
Lastly, our app will show off for all four message if we don't expose these files via an FTP URL.
The FFmpeg package will not be functional angular.
It can be configured to deliver additional asset files.
To get started, turn off the development server.
Our changes won't be applied until we've restarted the server.
Next, open the angular dot JSON file.
In this file search for an option called architect.
The architect option is an object of configuration settings for the different commands of angular.
We can configure a specific command to modify the behavior of that command.
The command we're going to modify is the build command inside this object.
Search for an option called assets.
By default, Angular will deliver the fave icon file and files stored in the source slash assets directory.
We can add this array to include the files from the FFmpeg package.
One option is to list the files one by one.
On the other hand, it's possible we may need to update the configuration whenever new files are introduced.
Angular supports object syntax for creating a file match pattern.
Let's pass in an object in this object.
We're going to add a property called input.
We can point to a specific directory in our project by adding the input property, the value for this
property must be a path relative to our project.
Set this property to the following value node modules slash at FFmpeg slash core slash dist.
Next, let's add another property called output.
We can configure the CDP path for our files.
For example, let's say we don't want to type this entire path.
We could set this option to test by setting it to test.
We can access files from the input option by typing test in the address bar, followed by the files
name.
The FFmpeg package is expecting to find the values from the Node Modules directory.
Let's make a copy of the input path.
There's one last option will add it's called Glob.
In the resource section of this lecture, I provide a link to a package called Glob.
Internally, angular installs this package for searching through folders.
It's a package for finding files with patterns.
You can refer to the documentation for details on how to use this package.
Luckily, we can avoid configuring this package by adding the glaube option to our object, and there
will pass on our pattern to this package to search for files back in the editor.
We're going to set this option to an asterisk character.
The asterisk character can be thought of as a wildcard character, it'll select all files from the input
directory.
Let's give our app a test.
Turn on the server with the Nji Serve Command.
Next, I'm going to refresh the page that gave me a 404 error.
This time, angular server can deliver the files from the FFmpeg package, you should be able to access
the JavaScript file from your browser to before moving on.
You should test for this behavior as well.
In the next lecture, we're going to make one final adjustment to our configuration files.